Vue Js Add Table Row Dynamically: Adding a table row in Vue JS can be done dynamically by making use of the v-for directive, the append method provided by JavaScript, and the push() method on an array containing your data . In this tutorial, we will be creating an HTML table that has a button to add a new row at the end of the table.
How to Create Table Row Dynamically in Vue Js?
Adding a table row dynamically with Javascript and Vue.js: initially, the table has one row, and the “Add Row” button initialises the table by dynamically adding rows to the table’s body. You can copy the sample code below and edit it using the code editor. You can use this sample code to help you paste the code for your project and begin “Dynamically Add Table Rows Using JavaScript and Vue.js.”
Vue Js add Table Row Dynamically Example 1
<div id="app">
<button @click="addRow">Add Row</button>
<table>
<thead>
<tr>
<th>Row Number</th>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tr v-for="(tableData,index) in tableRows" :id="index">
<td>{{tableData}}</td>
<td><input type="text" /></td>
<td><input type="number" /></td>
</tr>
</table>
</div>
<script type="module">
import { createApp } from "vue";
createApp({
data() {
return {
tableRows: ["Row 1"],
counter: 1,
};
},
methods: {
addRow() {
this.counter++;
this.tableRows.push("Row " + this.counter);
},
},
}).mount("#app");
</script>
Output of above example
How can I add a new row dynamically to a table in Vue.js?
To add a new row dynamically to a Vue.js table, you need to create an array to hold the data for the rows. You can then use the v-for directive to loop through the array and render the rows. To add a new row, you can simply push a new object to the array, which will automatically trigger a re-render of the table. You can also add a form or modal to allow users to input data for the new row, which can then be added to the array using a method. To ensure reactivity, you should use Vue’s reactive data properties or Vuex store to manage the table data.
Vue Js Table add row Example 2
<div id="app">
<div class="table-container">
<h3>Vue Js Table Add Row </h3>
<button @click="showModal = true" class="add-button">Add Row</button>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in tableData" :key="index">
<td>{{ row.name }}</td>
<td>{{ row.age }}</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-container" v-if="showModal">
<div class="modal">
<h2>Add Row</h2>
<form @submit.prevent="addRow">
<label>
Name:
<input type="text" v-model="newRow.name" />
</label>
<label>
Age:
<input type="number" v-model.number="newRow.age" />
</label>
<button type="submit" class="add-button">Add</button>
<button @click="showModal = false" class="cancel-button">Cancel</button>
</form>
</div>
</div>
</div>
<script type="module">
const app = Vue.createApp({
// Define the data properties and methods for the app
data() {
return {
tableData: [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "Charlie", age: 35 },
],
newRow: { name: "", age: "" },
showModal: false,
};
},
methods: {
addRow() {
if (this.newRow.name && this.newRow.age) {
this.tableData.push({ ...this.newRow });
this.newRow.name = "";
this.newRow.age = "";
this.showModal = false;
}
},
},
});
app.mount("#app");
</script>
Output of Vue Js Table add Row
